<!--添加推荐人-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加推荐人</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/personalCenter.css">
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        .partner {
            margin: 0.4rem auto 0.1rem;
            width: 2rem;
            height: 0.2rem;
            text-align: center;
        }

        .partner a {
            font-size: 0.13rem;
            color: #0000d0;

            border-bottom: 1px solid #0000d0;
        }

        .footer a.list-group-item {
            margin-top: 0 !important;
        }

        .hint {
            text-align: center;
            font-size: 0.14rem;
            color: red;
            margin-top: 0.1rem;

            visibility: hidden;

        }
    </style>
</head>
<script type="text/javascript">
    $(window).load(function(){
        $(".loading").addClass("loader-chanage");
        $(".loading").fadeOut(300)
    })
</script>
<body>
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<div class="informationBox">
    <div class="infHead">
        <div class="ingBack">
            <a href="personalCenter.html">
                <img src="images/iBack_03.png"/>
            </a>
        </div>
        <div class="infTitle"><span>推荐人</span></div>
    </div>
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item"><span>推荐人电话</span><input type="number" id="phoneNumber" class="form-control"
                                                                 placeholder="推荐人手机号"></li>
            <div class="hint">请输入正确的手机号</div>

        </ul>
        <div class="partner">
            <a href="#">成为合伙人</a>
        </div>
        <div class="footer">
            <input class="btn btn-default" type="submit" value="保存">

        </div>
    </div>
</div>
<script>
    $(function () {
        // 给获取的电话号码的失去焦点时间
        let phoneNumber = $("#phoneNumber");
        $("#phoneNumber").on("blur", function () {
            // 创建手机号的正则
            var re = /^[1][3,4,5,7,8][0-9]{9}$/;
            // 判断是否为手机号
            if (re.test(phoneNumber.val())) {

                console.log("对的");
            } else {
                $(".hint").css({"visibility": "visible"});
            }

        })
    });

    // 获取焦点时隐藏那样式
    $("#phoneNumber").on("focus", function () {

        $(".hint").css({"visibility": "hidden"});


    })


</script>
</body>
</html>